<template>
	<view>
		<view
			:class="{
				leftBottom: leftBottom,
				rightBottom: rightBottom,
				leftTop: leftTop,
				rightTop: rightTop,
				rightMiddle:rightMiddle
			}"
			:style="_bottom"
			class="fab-box fab"
		>
			<view :style="{ 'background-color': styles.buttonColor }" class="fab-circle"  @tap="_onClick"><slot></slot></view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'YxylFab',
	props: {
		pattern: {
			type: Object,
			default() {
				return {};
			}
		},
		horizontal: {
			type: String,
			default: 'right'
		},
		vertical: {
			type: String,
			default: 'bottom'
		},
		show: {
			type: Boolean,
			default: false
		},
		customColor:{
			type:String,
			default:''
		},
		bottom:{
			type:String,
			default:''
		}
	},

	data() {
		return {			
			styles: {
				color: '#fff',
				selectedColor: '#007AFF',
				backgroundColor: '#F44336',
				buttonColor: this.customColor?this.customColor:'#F44336'
			}
		};
	},
	computed: {
		_bottom(){
			if(this.bottom)
			{
				return 'bottom:'+this.bottom
			}
			else{
				return '';
			}
		},
		// 动态计算宽度
		boxWidth() {
			return this.getPosition(3, 'horizontal');
		},
		// 动态计算高度
		boxHeight() {
			return this.getPosition(3, 'vertical');
		},
		// 计算左下位置
		leftBottom() {
			return this.getPosition(0, 'left', 'bottom');
		},
		// 计算右下位置
		rightBottom() {
			return this.getPosition(0, 'right', 'bottom');
		},
		// 计算左上位置
		leftTop() {
			return this.getPosition(0, 'left', 'top');
		},
		rightTop() {
			return this.getPosition(0, 'right', 'top');
		},
		rightMiddle(){		
			return this.getPosition(0,'right','middle');
		},
		flexDirectionStart() {
			return this.getPosition(1, 'vertical', 'top');
		},
		flexDirectionEnd() {
			return this.getPosition(1, 'vertical', 'bottom');
		},
		horizontalLeft() {
			return this.getPosition(2, 'horizontal', 'left');
		},
		horizontalRight() {
			return this.getPosition(2, 'horizontal', 'right');
		}
	},
	watch: {
		pattern(newValue, oldValue) {
			//console.log(JSON.stringify(newValue))
			this.styles = Object.assign({}, this.styles, newValue);
		}
	},
	created() {
		
		// 初始化样式
		this.styles = Object.assign({}, this.styles, this.pattern);
	},
	methods: {				
		/**
		 * 按钮点击事件
		 */
		_onClick() {
			this.$emit('trigger');
		},
		/**
		 * 获取 位置信息
		 */
		getPosition(types, paramA, paramB) {
			
			if (types === 0) {
				return this.horizontal === paramA && this.vertical === paramB;
			} else if (types === 1) {
				return this.direction === paramA && this.vertical === paramB;
			} else if (types === 2) {
				return this.direction === paramA && this.horizontal === paramB;
			}
		}
	}
};
</script>

<style scoped>
@font-face {
	font-family: uniicons;
	font-weight: normal;
	font-style: normal;
	src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf') format('truetype');
}
.uni-icon {
	font-family: uniicons;
	font-size: 24px;
	font-weight: normal;
	font-style: normal;
	line-height: 1;
	display: inline-block;
	text-decoration: none;
	-webkit-font-smoothing: antialiased;
}
.uni-icon-plusempty:before {
	content: '\e468';
}
.fab-box {
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
}

.fab-box.top {
	width: 60upx;
	height: 60upx;
	right: 30upx;
	bottom: 60upx;
	border: 1px #5989b9 solid;
	background: #6699cc;
	border-radius: 10upx;
	color: #fff;
	transition: all 0.3;
	opacity: 0;
}

.fab-box.active {
	opacity: 1;
}

.fab-box.fab {
	z-index: 10;
}

.fab-box.fab.leftBottom {
	left: 30rpx;
	bottom: 60rpx;
}

.fab-box.fab.leftTop {
	right: 80rpx;
	top: 60rpx;
	/* #ifdef H5 */
	top: calc(80upx + var(--window-top));
	/* #endif */
}

.fab-box.fab.rightBottom {
	right: 60rpx;
	bottom: 80rpx;
	/* #ifdef H5 */
	bottom: calc(80rpx + var(--window-bottom));
	/* #endif */
}

.fab-box.fab.rightTop {
	right: 30upx;
	top: 80upx;
	/* #ifdef H5 */
	top: calc(80upx + var(--window-top));
	/* #endif */
}
.fab-box.fab.rightMiddle{
    right: 60rpx;
	bottom: 180rpx;
	
}
.fab-circle {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	width: 80rpx;
	height: 80rpx;
	background: #3c3e49;
	/* background: #5989b9; */
	border-radius: 50%;
	box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
	z-index: 11;
	align-items: center;
	justify-content: center;
}

.fab-circle.left {
	left: 0;
}

.fab-circle.right {
	right: 0;
}

.fab-circle.top {
	top: 0;
}

.fab-circle.bottom {
	bottom: 0;
}

.fab-circle .uni-icon-plusempty {
	color: #ffffff;
	font-size: 80upx;
	transition: all 0.3s;
	font-weight: bold;
}

.fab-circle .uni-icon-plusempty.active {
	transform: rotate(135deg);
	font-size: 80upx;
}

.fab-content {
	background: #6699cc;
	box-sizing: border-box;
	display: flex;
	border-radius: 100upx;
	overflow: hidden;
	box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
	transition: all 0.2s;
	width: 80rpx;
}

.fab-content.left {
	justify-content: flex-start;
}

.fab-content.right {
	justify-content: flex-end;
}

.fab-content.flexDirection {
	flex-direction: column;
	justify-content: flex-end;
}

.fab-content.flexDirectionStart {
	flex-direction: column;
	justify-content: flex-start;
}

.fab-content.flexDirectionEnd {
	flex-direction: column;
	justify-content: flex-end;
}

.fab-content .fab-item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 80rpx;
	height: 80rpx;
	font-size: 24upx;
	color: #fff;
	opacity: 0;
	transition: opacity 0.2s;
}

.fab-content .fab-item.active {
	opacity: 1;
}

.fab-content .fab-item .content-image {
	width: 50upx;
	height: 50upx;
	margin-bottom: 5upx;
}

.fab-content .fab-item.first {
	width: 80rpx;
}
</style>
